<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bookdetail.css">
</head>
<body>
    <!-- 公共部分开始 -->
    <div class="f1">
        <div class="head">
            <div class="left">
                <a href="https://www.ireader.com/index.php?ca=channel.index&pca=booksort.index">
                    <img src="img/icon/web-logo.png" alt="">
                </a>
            </div>
            <div class="right">
                <div class="nav">
                    <ul>
                        <li>
                            <a href="https://www.ireader.com/index.php?ca=channel.index&pca=booksort.index">首页</a>
                        </li>
                        <li>
                            <a href="https://www.ireader.com/index.php?ca=booksort.index&pca=channel.index">分类</a>
                        </li>
                        <li>
                            <a href="https://www.ireader.com/index.php?ca=bookrank.index&pca=booksort.index">排行</a>
                        </li>
                        <li>
                            <a href="https://select.zhangyue.com/b?s=shucheng">机构服务</a>
                        </li>
                        <li>
                            <a href="https://www.ireader.com/index.php?ca=Essaycontest.index&pca=bookrank.index">征文大赛</a>
                            <img src="img/icon/new.png" alt="">
                        </li>
                        <li>
                            <a href="https://www.ireader.com/index.php?ca=client.index&pca=Essaycontest.index">下载</a>
                        </li>      
                    </ul>
                </div>
                <div class="search">
                    <form action="" method="GET">
                        <input type="text" placeholder="书名/作者名">
                        <s></s>
                    </form>
                </div>
                <div class="login">
                    <a href="javascript:;">
                        <button>登录</button>
                    </a>
                </div>
            </div>    
        </div>
    </div>
    <!-- 书籍内容开始 -->
    <div class="content">
        <div class="bookInfo">
            <div class="bookLeft">
                <s>言情小说</s>
                <a href="">
                    <img src="./img/big_img/全世界最好的叶先生.jpg" alt="">
                </a>
                <img src="./img/big_img/shadow.gif" alt="" class="shadow">
            </div>
            <div class="bookRight">
                <div class="bookinf01">
                    <div class="bookname">
                        <h2>
                            <a>全世界最好的叶先生</a>
                        </h2>
                        <span>7.9</span>
                    </div>
                    <p>
                        <span>作者：虞美人</span>
                        <span>字数：126.7万字</span>
                        <span>
                            粉丝数：<b>5891</b>
                        </span>
                        <span>
                            点赞数：<b>10879</b>
                        </span>
                        <span class="manyMan">35人评分</span>
                    </p>
                </div>
                <div class="bookinf02">
                    <div class="left">
                        <p>
                            <i class="price">价格：5阅饼/千字</i>
                        </p>
                        <a href="" target="_blank">
                            <span class="tryRead">免费试读</span>
                        </a>
                        <span class="buyBook">购买</span>
                    </div>
                    <div class="right">
                        <span class="look_phone">
                            <img src="img/share/look_phone.jpg" alt="">
                        </span>
                        <span class="look_ewm">
                            <img src="img/share/index.png" alt="">
                        </span>
                    </div>
                </div>
                <div class="bookinf03">
                    <p>爱过，伤过，纠缠过，白悠悠决定放弃了。给心爱的人自由，也还她一个自由！可为什么她放弃了，他却开始百般纠缠……“虐妻一时爽，追妻火葬场”，霸道总裁叶先生，化身成为宠妻狂魔，转眼便是全世界最好的叶先生……</p>
                    <div class="shareWrap">
                        <div class="share"  style="display: none;">
                            <a href="javascript:;" class="weibo">
                                <img src="img/icon/weibo.png" alt="">
                            </a>
                            <a href="javascript:;">
                                <img src="img/icon/qq.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 书圈开始 -->
        <div class="sqCon">
            <div class="bookCir">
                <div class="title">
                    <p>
                        <span class="shuquan">书圈</span>
                        <span class="line">|</span>
                        <span class="">共5989人，184条</span>
                    </p>
                    <a href="javascript:;" class="comBtn">
                        <s></s>
                        <span>我来说两句</span>
                    </a>
                </div>
                <div class="allCom">
                    <ul>
                        <li>
                            <span class="headImg">
                                <img src="img/portrait/1.jpg" alt="">
                            </span>
                            <div class="comment">
                                <div class="uname">
                                    <p>芝麻</p>
                                    <span>LV10</span>
                                    <span>2020-09-02</span>
                                </div>
                            </div>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</body>
</html>